<template>
  <div>
    <dc-cell title="收支和利润趋势" class="mt20"></dc-cell>
    <div class="common-chart" id="complexTrend"></div>
    <div class="mt20">
      <dc-cell title="收入分布情况"></dc-cell>
      <div id="incomeLine" class="common-chart"></div>
      <dc-row class="echarts-list-header" type="flex" justify="space-around">
        <dc-col class="text-left ellipsis" span="6">收入类目</dc-col>
        <dc-col class="" span="6">金额(元)</dc-col>
        <dc-col class="" span="6">占比</dc-col>
      </dc-row>
      <dc-row class="echarts-list-data bg-white" type="flex" justify="space-around" v-for="(item,index) in incomes" :key="item.accountCode">
        <dc-col class="text-left" span="6">
          <span class="point" :style="{background: colors[index]}"></span>
          {{item.accountName}}
        </dc-col>
        <dc-col class="" span="6">{{item.accountNum}}</dc-col>
        <dc-col class="" span="6">{{item.accountPercent}}%</dc-col>
      </dc-row>
    </div>
    <div class="mt20">
      <dc-cell title="支出分布情况"></dc-cell>
      <div id="expenseLine" class="common-chart"></div>
      <dc-row class="echarts-list-header" type="flex" justify="space-around">
        <dc-col class="text-left ellipsis" span="6">支付类目</dc-col>
        <dc-col class="" span="6">金额(元)</dc-col>
        <dc-col class="" span="6">占营收比例</dc-col>
      </dc-row>
      <dc-row class="echarts-list-data bg-white" type="flex" justify="space-around" v-for="(pay,index) in expenses" :key="pay.accountCode">
        <dc-col class="text-left" span="6">
          <span class="point" :style="{background: colors[index]}"></span>
          {{pay.accountName}}
        </dc-col>
        <dc-col class="" span="6">{{pay.accountNum}}</dc-col>
        <dc-col class="" span="6">{{pay.accountPercent}}%</dc-col>
      </dc-row>
    </div>
  </div>
</template>
<script>
  import cell from '@/components/cell';
  import {col, row} from '@/components/Flex';
  import {initLine} from '@/common/echarts/line';
  import {initColumn} from '@/common/echarts/column';
  import api from '@/common/api/financial';
  import store from '@/store/shopAlter';
  import colors from '@/common/echarts/theme.json';
  export default {
    components: {
      'dc-cell': cell,
      'dc-col': col,
      'dc-row': row
    },
    props: {
      timeFlag: [String, Number],
      beginTime: Number,
      endTime: Number
    },
    data () {
      return {
        profits: [],
        inComeList: [],
        expenseList: [],
        incomes: [],
        expenses: [],
        line: null,
        line2: null,
        complex1: null,
        colors: colors.color
      };
    },
    watch: {
      beginTime () {
        this.buildCharts();
      }
    },
    methods: {
      buildCharts () {
        let data = {
          groupCode: store.state.shopAlter.store.groupCode,
          timeFlag: this.timeFlag,
          beginTime: this.beginTime,
          endTime: this.endTime
        };
        this._sysProfitTrend(data);
        this._sysInLine(data);
        this._sysOutLine(data);
        this._sysOutList(data);
      },
      _sysProfitTrend (data) {
        api.getProfitTrend(data).then(res => {
          this.profits = res;
          this.initTrendComplex();
        });
      },
      _sysInLine (data) {
        let data2 = {
          beginTime: data.beginTime,
          endTime: data.endTime,
          timeFlag: 4,
          accountFlag: 1
        };
        api.getFinLine(data2).then(res => {
          this.inComeList = res;
          this.initIncomeLine();
        });
        this._sysInList(data2);
      },
      _sysInList (data) {
        api.getFinList(data).then(res => {
          this.incomes = res;
        });
      },
      _sysOutLine (data) {
        data.accountFlag = 2;
        api.getFinLine(data).then(res => {
          this.expenseList = res;
          this.initExpenseLine();
        });
      },
      _sysOutList (data) {
        api.getFinList(data).then(res => {
          this.expenses = res;
        });
      },
      chartsData (list, itemName, itemName1, itemName2, itemName3, type) {
        let series = [];
        let xData = [];
        let legName = [];
        list.forEach(function (item, index) {
          if (item[itemName]) {
            xData = [];
            series[index] = {};
            series[index].name = item[itemName1];
            legName.push(item[itemName1]);
            series[index].type = type;
            series[index].data = [];
            item[itemName].forEach(function (m) {
              series[index].data.push(m[itemName2]);
              xData.push(m[itemName3]);
            });
          }
        });
        return {
          series: series,
          xData: xData,
          legName: legName
        };
      },
      //收支趋势
      initTrendComplex () {
        let xTime = ['0'];
        let allCome = ['0'];
        let allOut = ['0'];
        let netMar = ['0'];
        if (this.profits.length > 0) {
          for (let i = 0; i < this.profits.length; i++) {
            xTime.push(this.profits[i].date);
            allCome.push(this.profits[i].totalIncome);
            allOut.push((this.profits[i].totalExpend) * (-1));
            netMar.push(this.profits[i].netMargin);
          }
        }
        let yAxisMax = Math.max.apply(null, allCome);
        let yAxisMin = Math.min.apply(null, allOut);

        this.complex1.hideLoading();
        this.complex1.setOption({
          toolbox: {
            feature: {
              dataView: {show: true, readOnly: false},
              magicType: {show: true, type: ['line', 'bar']},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          legend: {
            data: ['总收入', '总支出', '净利润']
          },
          xAxis: [
            {
              type: 'category',
              data: xTime,
              minInterval: 1,
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              min: yAxisMin,
              max: yAxisMax
            },
            {
              type: 'value',
              min: yAxisMin,
              max: yAxisMax
            }
          ],
          series: [
            {
              name: '总收入',
              type: 'bar',
              data: allCome
            },
            {
              name: '总支出',
              type: 'bar',
              data: allOut
            },
            {
              name: '净利润',
              type: 'line',
              yAxisIndex: 1,
              data: netMar
            }
          ]
        });
      },
      //收入分布
      initIncomeLine () {
        let seriesData = {
          xData: ['0'],
          legName: [''],
          series: [{name: '', type: 'line', data: ['0']}]
        };
        if (this.inComeList.length > 0) {
          seriesData = this.chartsData(this.inComeList, 'list', 'accountName', 'accountNum', 'date', 'line');
        }
        this.line.hideLoading();
        this.line.setOption({
          legend: {
            data: seriesData.legName
          },
          xAxis: {
            data: seriesData.xData
          },
          yAxis: [
            {
              type: 'value',
              name: '优惠金额',
              nameRotate: 90,
              nameGap: 50,
              nameLocation: 'middle'
            }
          ],
          series: seriesData.series
        });
      },
      //支出分布
      initExpenseLine () {
        let seriesData = {
          xData: ['0'],
          legName: [''],
          series: [{name: '', type: 'line', data: ['0']}]
        };
        if (this.inComeList.length > 0) {
          seriesData = this.chartsData(this.inComeList, 'list', 'accountName', 'accountNum', 'date', 'line');
        }
        this.line2.hideLoading();
        this.line2.setOption({
          legend: {
            data: seriesData.legName
          },
          xAxis: {
            data: seriesData.xData
          },
          yAxis: [
            {
              type: 'value',
              name: '优惠金额',
              nameRotate: 90,
              nameGap: 50,
              nameLocation: 'middle'
            }
          ],
          series: seriesData.series
        });
      }
    },
    mounted () {
      this.line = initLine('#incomeLine');
      this.complex1 = initColumn('#complexTrend');
      this.line2 = initLine('#expenseLine');
      this.initIncomeLine();
      this.initExpenseLine();
      this.initIncomeLine();
    },
    activated () {
      this.buildCharts();
    },
    created () {
      this.buildCharts();
    }
  };
</script>
<style lang="scss" scoped>
</style>
